<template>
    <div class="index">
        <div ref="pieChartRef" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted } from 'vue';
// 引入核心模块
import * as echarts from 'echarts/core';
// 引入柱状图等图表
import { BarChart,PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 引入必要的组件（提示框、图例等）
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';

// 注册所有需要的组件（包括提示框、图例等）
echarts.use([
  PieChart,
  CanvasRenderer,
  TitleComponent,  // 标题组件
  TooltipComponent, // 提示框组件
  LegendComponent  // 图例组件
]);

const pieChartRef = ref(null);
// 图表实例
let myChart = null

onMounted(() => {
  // 初始化图表（确保DOM已挂载）
  myChart = echarts.init(pieChartRef.value);

  const option={
    title: {
      text: '不同类型球场分布数量饼状图',
      subtext: '统计维度:球场分类',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '球场数量',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '篮球' },
          { value: 735, name: '羽毛球' },
          { value: 580, name: '足球' },
          { value: 484, name: '乒乓球' },
          { value: 300, name: '排球' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 渲染图表
  myChart.setOption(option)

  // 监听窗口大小变化，自动调整图表
  window.addEventListener('resize', () => {
    myChart.resize();
  });
  
  // 保存实例到 ref，方便后续更新数据
  pieChartRef.value = myChart;
})
  // 组件卸载时销毁图表，释放资源
  onUnmounted(() => {
    if (myChart) {
      myChart.dispose();
    }
  });

</script>

<style lang='scss' scoped>

</style>